<template>
  <div>
    <div class="game_welfare">
      <div class="title">
        <span class="icon"></span>
        <span>变态福利</span>
      </div>
      <div v-if="benefitContent">
        <ul class="list_box" :style="{height: show === true? 'auto' : '70px'}">
          <li class="list_item" v-html="benefitContent">
          </li>
        </ul>
        <div class="btn_show_hide" v-if="showBtn">
          <div v-show="show" class="show_hide" @click="show = !show">
            <span :style="{color: appType === '277'?'':'#FF5E39'}">收起</span>
            <img v-show="appType === '277'" src="../../../assets/img/datail/ic_detail_arrow_top.png" alt="">
            <img v-show="appType === 'cat'" src="../../../assets/img/datail/ic_detail_arrow_top_cat.png" alt="">
          </div>
          <div v-show="!show" class="show_hide" @click="show = !show">
            <span :style="{color: appType === '277'?'':'#FF5E39'}">查看全部活动</span>
            <img v-show="appType === '277'" src="../../../assets/img/datail/ic_detail_arrow_down.png" alt="">
            <img v-show="appType === 'cat'" src="../../../assets/img/datail/ic_detail_arrow_down_cat.png" alt="">
          </div>
        </div>
      </div>
      <div v-else>
        <img class="empty_img" src="../../../assets/img/datail/ic_empty_log.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { appType } from '../../../assets/js/app';

  export default {
    props: {
      benefitContent: {
        type: String,
        default: '',
      }
    },
    created () {
      this.appType = appType();
    },
    data() {
      return {
        show: true,
        appType: null,
      }
    },
    computed: {
      showBtn() {
        if(this.benefitContent) {
          return true
        } else {
          return false
        }
      }
    },
  }
</script>

<style scoped>
.game_welfare {
  width: 750px;
  box-sizing: border-box;
  height: auto;
  padding: 44px 40px 0;
  border-bottom: 1px solid #e3e3e3;
}

.game_welfare .title {
  padding-bottom: 20px;
  font-size: 26px;
  color: #333;
  font-weight: bold;
  line-height: 36px;
  display: flex;
  align-items: center;
}

.game_welfare .title .icon {
  display: inline-block;
  width: 31px;
  height: 36px;
  background: url('../../../assets/img/datail/ic_game_detail_bt_fuli.png') no-repeat;
  background-size: 100%;
  margin-right: 15px;
}

.list_box {
  height: 184px;
  overflow: hidden;
}

.list_item {
  font-size: 24px;
  line-height: 36px;
  padding-bottom: 20px;
  color: #333;
}

.btn_show_hide {
  line-height: 40px;
  padding: 32px 0;
  font-size: 24px;
  color: #3246f1;
}

.show_hide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.show_hide img {
  margin-left: 10px;
  width: 16px;
  height: 10px;
}

.empty_img {
  width: 670px;
}
</style>